<template>
  <div class="tableBasicInfo">
      <el-form :model="info" ref="basicInfoForm" :rules="rules" label-position="left" label-width="100px" size="medium" @submit.native.prevent>
          <el-row>
               <el-col :span="12" class="grid-cell">
               <el-form-item label="表名称" prop="tableName" class="required label-right-align">
                    <el-input v-model="info.tableName" type="text" clearable></el-input>
               </el-form-item>
               </el-col>
               <el-col :span="12" class="grid-cell">
               <el-form-item label="表描述" prop="tableComment" class="required label-right-align">
                    <el-input v-model="info.tableComment" type="text" clearable></el-input>
               </el-form-item>
               </el-col>
          </el-row>
          <el-row>
               <el-col :span="12" class="grid-cell">
               <el-form-item label="实体类名称" prop="className" class="required label-right-align">
                    <el-input v-model="info.className" type="text" clearable></el-input>
               </el-form-item>
               </el-col>
               <el-col :span="12" class="grid-cell">
               <el-form-item label="作者" prop="functionAuthor" class="required label-right-align">
                    <el-input v-model="info.functionAuthor" type="text" clearable></el-input>
               </el-form-item>
               </el-col>
          </el-row>
          <el-row>
               <el-col :span="24" class="grid-cell">
               <el-form-item label="备注" prop="remark" class="label-right-align">
                    <el-input type="textarea" v-model="info.remark" rows="3"></el-input>
               </el-form-item>
               </el-col>
          </el-row>
     </el-form>
  </div>
</template>
<script lang="ts">
 
import { Component, Vue,Prop } from 'vue-property-decorator';
import FormCreateApi from "@/components/list-create/table-code-create-api";
@Component
export default class ToDoList extends Vue {
     @Prop() params!: any;
     public info:any= {};
     public rules={
        tableName: [
            { required: true, message: "请输入表名称", trigger: "blur" }
        ],
        tableComment: [
            { required: true, message: "请输入表描述", trigger: "blur" }
        ],
        className: [
            { required: true, message: "请输入实体类名称", trigger: "blur" }
        ],
        functionAuthor: [
            { required: true, message: "请输入作者", trigger: "blur" }
        ]
      };
     async created(){
          this.info=this.params.info;
     }
     //创建表单
     submitForm() {
          
     }
     //取消选中
     handleSelectionChange(){
          
     }
     
     toggleSelection(){
        
     }

}
</script>
<style lang="less">
    .tableBasicInfo{
           margin-top: 20px;
           width: 90%;
           margin-left: 5%;
          .el-input-number.full-width-input,
          .el-cascader.full-width-input {
              width: 100% !important;
          }
          .el-form-item--medium {
               .el-radio {
                    line-height: 36px !important;
               }
               
               .el-rate {
                    margin-top: 8px;
               }
          }
          .el-form-item--small {
               .el-radio {
                    line-height: 32px !important;
               }
               .el-rate {
                    margin-top: 6px;
               }
          }
          .el-form-item--mini {
               .el-radio {
                    line-height: 28px !important;
               }
     
               .el-rate {
                    margin-top: 4px;
               }
          }
          .clear-fix:before,
          .clear-fix:after {
               display: table;
               content: "";
          }
          .clear-fix:after {
               clear: both;
          }
          .float-right {
               float: right;
          }
    }
</style>
<style lang="less" scoped>
  .tableBasicInfo{
         div.table-container {
           table.table-layout {
               width: 100%;
               table-layout: fixed;
               border-collapse: collapse;
               td.table-cell {
                    display: table-cell;
                    height: 36px;
                    border: 1px solid #e1e2e3;
               }
            }
          }
          .label-left-align ::v-deep .el-form-item__label {
               text-align: left;
          }
          
          .label-center-align ::v-deep .el-form-item__label {
               text-align: center;
          }
          
          .label-right-align ::v-deep .el-form-item__label {
               text-align: right;
          }
          .static-content-item {
               min-height: 20px;
               display: flex;
               justify-content: center;
               align-items: center;
               ::v-deep .el-divider--horizontal {
                    margin: 0;
               }
          }
  }
  
</style>
